<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>全局配置</title>
    <link rel="stylesheet" href="../element/latest/element.css" media="all">
    <link rel="stylesheet" href="../vue-table/3.2.1/style.css" media="all">
    <script type="text/javascript" src="../vue/es6-promise.auto.min.js"></script>
    <script type="text/javascript" src="../vue/es6-promise.auto.min.js"></script>
    <script type="text/javascript" src="../vue/browser.min.js"></script>
    <script type="text/javascript" src="../vue/browser-polyfill.min.js"></script>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="../vue/axios.js"></script>
    <script type="text/javascript" src="../element/latest/element.js"></script>
    <script type="text/javascript" src="../vue-table/3.2.1/xe-utils.js"></script>
    <script type="text/javascript" src="../vue-table/3.2.1/vxe-table.js"></script>
    <script type="text/javascript" src="../../../editor/assets/drag/js/lib/mc/magicaltool.js"></script>
    <script type="text/javascript" src="../mc/mc-new-vxe-table.js"></script>
    <script type="text/javascript" src="../mc/official-ui.js"></script>
</head>
<body style="">
<div id="magicalDragScene">
<!--    查询框-->
    <el-form :model="userForm" label-width="140px">
        <el-form-item label="登录入口名称">
            <el-input v-model="userForm.loginName"></el-input>
        </el-form-item>
        <el-form-item label="登录背景图">
            <mc-image-upload v-model="userForm.loginBg" action="magical_lowcode/manager/web/upload?prefix=admin"></mc-image-upload>
        </el-form-item>
        <el-form-item label="工作台名称">
            <el-input v-model="userForm.softName"></el-input>
        </el-form-item>
        <el-form-item label="工作台名称样式">
            <el-input v-model="userForm.softNameStyle"></el-input>
        </el-form-item>
        <el-form-item label="工作台LOGO">
            <mc-image-upload v-model="userForm.softIcon" action="magical_lowcode/manager/web/upload?prefix=admin"></mc-image-upload>
        </el-form-item>
        <el-form-item label="工作台LOGO样式">
            <el-input v-model="userForm.softIconStyle"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</div>
<script>

    var _t = this;
    var Ctor = Vue.extend({
        //提前绑定的变量
        data: function () {
            return {
                // 项目下用户信息
                projectUuid: '',// 项目id
                userForm:{loginName:"",loginBg:"",softName:"",softNameStyle:"",softIcon:"",softIconStyle:""}
            }
        },
        //页面加载完 会执行方法 可以做一些初始化操作
        mounted: function () {
            this.getSetting();
        },
        /*当前页面绑定的方法集合 与布局器节点一一映射即可 参照element ui文档*/
        methods: {
            getSetting:function(){
                var _this = this
                this.$magicaltool.request.axios({
                    method: 'get',
                    url: '/magical_lowcode/manager/page/get-setting',
                    param: {}
                }).then(function (res) {
                    // 处理json数据,解析出角色，拥有权限，所有权限，拥有菜单，所有菜单
                    if (res.code == 0 ){
                        if(res.data){
                            _this.userForm.loginName = res.data.loginName;
                            _this.userForm.loginBg = res.data.loginBg;
                            _this.userForm.softName = res.data.softName;
                            _this.userForm.softNameStyle = res.data.softNameStyle;
                            _this.userForm.softIcon = res.data.softIcon;
                            _this.userForm.softIconStyle = res.data.softIconStyle;
                        }

                    }else{
                        _this.$message({
                            message: '获取信息失败',
                            type: 'error'
                        });
                    }
                });
            },
            submit:function () {
                var _this = this;
                this.$magicaltool.request.axios({
                    method: 'post',
                    url: '/magical_lowcode/manager/page/save-setting',
                    param: _this.userForm
                }).then(function (res) {
                    if (res.code == 0){
                        _this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                    }else{
                        _this.$message({
                            message: '保存失败',
                            type: 'error'
                        });
                    }
                });
            }
        }
    });
    new Ctor().$mount('#magicalDragScene');

</script>
<style>
    #magicalDragScene{
        background-color:#fff;
        padding:15px;
    }
</style>
</body>

</html>
